<template>
  <view>
    <image class="bg" src="../../static/my/wyjm.png" mode="aspectFill" />
    <view class="back" @click="goBack">
      <u-icon name="arrow-left" size="24" color="#fff"></u-icon>
    </view>
    <view class="pageBox">
      <view class="box">
        <view class="title">请核对您的信息</view>
        <u-form labelPosition="left" :model="formData" ref="uForm" label-width="90">
          <u-form-item label="姓名" prop="userInfo.name" ref="item1" borderBottom>
            <u-input v-model="formData.userName" border="none" placeholder="请输入姓名"></u-input>
          </u-form-item>
          <u-form-item label="手机号" prop="userInfo.phone" ref="item1" borderBottom>
            <u-input v-model="formData.cell" border="none" placeholder="请输入手机号"></u-input>
          </u-form-item>
          <u-form-item label="身份证号" prop="address">
            <u-input v-model="formData.address1" border="none" placeholder="请输入身份证号"></u-input>
          </u-form-item>
        </u-form>
      </view>
      <view class="box">
        <view class="title">请填写您的信息</view>
        <u-form labelPosition="top" :model="formData" ref="uForm" label-width="90">
          <u-form-item label="请选择入驻方式" prop="userInfo.sex" labelWidth="150" class="selectedItem" borderBottom @click="hideKeyboard()" ref="item1">
            <u-input v-model="formData.userName" border="none"></u-input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item label="请填写您的公司名称" prop="userInfo.sex" labelWidth="150" class="selectedItem" borderBottom ref="item1">
            <u-input v-model="formData.userName" border="none"></u-input>
          </u-form-item>
          <u-form-item label="请填写您的公司地址" prop="userInfo.sex" labelWidth="150" class="selectedItem" borderBottom @click="hideKeyboard()" ref="item1">
            <u-input v-model="formData.userName" border="none"></u-input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item label="请填写公司营业范围" prop="userInfo.sex" labelWidth="150" class="selectedItem" borderBottom ref="item1">
            <u-input v-model="formData.userName" border="none"></u-input>
          </u-form-item>
          <u-picker :show="show" :columns="columns"></u-picker>
        </u-form>
      </view>
    </view>
    <view class="bottomBox">
      <u-button text="立即入驻" shape="circle" color="#81D8D0"></u-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { goBack } from "@/utils/commonFn";
import { ref } from "vue";
const formData = ref({
  userName: "",
  flg: "1",
  address: "",
  address1: "",
  cell: "",
  imgUrl: "",
  id: "",
  userId: uni.getStorageSync("userId"),
});
const show = ref(false);
const columns = ref(["中国", "美国", "日本"]);
const hideKeyboard = () => {
  show.value = true;
};
</script>

<style lang="less" scoped>
.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 468rpx;
  z-index: 1;
}

.pageBox {
  width: 100%;
  position: absolute;
  top: 400rpx;
  padding-bottom: 150rpx;
  z-index: 99;
  .box {
    margin: 20rpx;
    padding: 32rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    /deep/ .uni-input-wrapper {
      text-align: right;
    }
    .title {
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
      line-height: 46rpx;
      text-align: left;
    }
    .selectedItem {
      /deep/.u-form-item__body__right {
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        border: 2rpx solid #f3f4f6;
        padding: 20rpx;
      }
    }
    /deep/ .uni-input-wrapper {
      text-align: left;
    }
  }
}
.scBox {
  display: flex;
  .box {
    width: 160rpx;
    height: 160rpx;
    border-radius: 8rpx;
    background: #f3f5f7;
    margin-right: 5rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
</style>
